<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">资源概况</text></view>
				</template>
				<view class="p-10 b-r-4 m-b-10 flex m-between s-center" style="background: #f5f7fe">
					<view class="flex s-center">可采年限：</view>
					<view class="flex s-center">
						<up-count-to bold class="m-r-5" :endVal="nianxian" decimals="2" color="#0052D9" />
						年
					</view>
				</view>
				<my-grid :list="list1" col="2"></my-grid>
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">资源储量变化趋势</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">资源储量分类统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
import { getByApiCode } from '@/api/customApi';

const showMoreKeys = ref([1, 2, 3]);

/*********************************************可采年限**********************************/
const nianxian = ref(237.25);

function fn0() {
	getByApiCode({
		apiCode: 'kekaicainianxian',
		propertyMapping: {
			value: 'val'
		}
	}).then((res) => {
		nianxian.value = res.data[0].value;
	});
}

/*********************************************资源概况**********************************/
const list1 = ref([
	{
		title: '地质储量',
		value: '357419',
		unit: '万吨'
	},
	{
		title: '可采储量',
		value: '355882',
		unit: '万吨'
	},
	{
		title: '开采能力',
		value: '1500',
		unit: '万吨/年'
	},
	{
		title: '年度回采煤量',
		value: '102.75',
		unit: 'km²',
		decimals: '2'
	}
]);

function fn1() {
	getByApiCode({
		apiCode: 'ZYGK',
		propertyMapping: {
			title: 'name',
			value: 'val',
			unit: 'unit'
		}
	}).then((res) => {
		list1.value = res.data;
		list1.value[3].decimals = 2;
	});
}
/*********************************************生产计划**********************************/
const opts = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 10, 10, 0],
		legend: {
			position: 'top',
			fontSize: 12
		},
		xAxis: {
			disableGrid: true,
			calibration: true
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万吨',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			line: {
				type: 'straight',
				width: 2,
				activeType: 'hollow'
			}
		}
	},
	chartData = ref({});

function fn2() {
	getByApiCode({
		apiCode: 'ZYCLBHQS',
		propertyMapping: {
			name: 'name',
			year: 'year',
			val: 'val'
		}
	}).then((res) => {
		const categories = [];
		const groups = res.data.reduce((groups, person) => {
			const key = person.name;
			if (!groups[key]) groups[key] = [];
			groups[key].push(person.val);
			if (!categories.includes(person.year)) categories.push(person.year);
			return groups;
		}, {});
		const series = [];
		for (let [name, data] of Object.entries(groups)) {
			series.push({
				name,
				data
			});
		}
		chartData.value.categories = categories;
		chartData.value.series = series;
	});
}

/*********************************************资源储量分类统计**********************************/
const opts2 = {
		padding: [0, 0, 0, 0],
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			calibration: true,
			fontSize: 10
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万吨',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			column: {
				type: 'group',
				width: 20,
				linearType: 'custom',
				seriesGap: 5,
				linearOpacity: 0.5,
				barBorderCircle: true,
				customColor: ['#1890FF', '#EB88E2']
			}
		}
	},
	chartData2 = ref({});

function fn3() {
	getByApiCode({
		apiCode: 'ZYCLFLTJ',
		propertyMapping: {
			name: 'name',
			val: 'val'
		}
	}).then((res) => {
		const categories = [],
			data = [];
		res.data.forEach((item) => {
			categories.push(item.name);
			data.push(item.val);
		});
		chartData2.value = {
			categories,
			series: [{ name: '', data }]
		};
	});
}

function getServerData(refresh) {
	Promise.all([fn0(), fn1(), fn2(), fn3()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style lang="scss" scoped></style>
